<template>
	<view class="auditForm">
		<xbd-pages-content title="审批表格">
			<template #content>
				<view class="content">
					<uni-swipe-action>
						<uni-swipe-action-item v-for="(item,index) in showList" :key="index" >
							<view class="card" @click='examine(item.assess_detail_id)'>
								<view class="box">
									<view class="left">
										工作指标
									</view>
									<view class="right" v-if="item.kindId !=='1'">
										{{item.work_target1}}-{{item.work_target}}
									</view>
									<view v-else class="right">
										{{item.work_target || '-'}}
									</view>
								</view>
								<view class="box">
									<view class="left">
										指标类型
									</view>
									<view class="right">
										{{item.performance_type || '-'}}
									</view>
								</view>
								<view class="box" v-if="msg==='1'">
									<view class="left">
										开始时间
									</view>
									<view class="right">
										{{item.start_time || '-'}}
									</view>
								</view>
								<view class="box" v-if="msg==='1'">
									<view class="left">
										结束时间
									</view>
									<view class="right">
										{{item.end_time || '-'}}
									</view>
								</view>

								<view class="box" v-if="msg==='2'">
									<view class="left">
										工作指标占比
									</view>
									<view class="right">
										{{(item.index_poroportion==0?' ':item.index_poroportion) || ' '}}
									</view>
								</view>
								<view class="box" v-if="msg==='2'">
									<view class="left">
										标准得分
									</view>
									<view class="right">
										{{(item.point==0?'': item.point) ||''}}
									</view>
								</view>
								<view class="box">
									<view class="left">
										工作时长
									</view>
									<view class="right">
										{{item.work_time || '-'}}
									</view>
								</view>
								<view class="box" v-if="msg==='1'">
									<view class="left">
										备注
									</view>
									<view class="right">
										{{item.note || '-'}}
									</view>
								</view>
								<view class="box">
									<view class="left">
										完成时间
									</view>
									<view class="right">
										{{(item.complete_time==0?' ':item.complete_time) || ' '}}
									</view>
								</view>
								<view class="box">
									<view class="left">
										完成效果
									</view>
									<view class="right">
										{{(item.complete_result==0?' ':item.complete_result) || ' '}}
									</view>
								</view>
								<view class="box">
									<view class="left">
										加分
									</view>
									<view class="right">
										{{item.add_socre}}
									</view>
								</view>
								<view class="box">
									<view class="left">
										扣分
									</view>
									<view class="right">
										{{item.sub_score}}
									</view>
								</view>
								<view v-if="msg !=='1'" class="box">
									<view class="left">
										实际得分
									</view>
									<view class="right">
										{{(item.last_point=='0.00'?'':item.last_point) || ' '}}
									</view>
								</view>

							</view>
							<template v-slot:right>
								<view class="swipe_right">
									<image v-if="msg === '1' && showSwipe" @click="modify(item.assess_detail_id)" class="swipe_image"
										src="../../static/images/performance/Modify.png" mode=""></image>
									<image v-if="showSwipe" @click="clickDel(item.assess_detail_id)" class="swipe_image"
										src="../../static/images/performance/del.png" mode=""></image>
								</view>
							</template>
						</uni-swipe-action-item>
					</uni-swipe-action>

					<view class="bottom" v-if="msg==='1' && (state === '1'|| state === '2')">
						<view class="">
							评价：
						</view>
						<view class="">
							{{reason}}
						</view>
					</view>
					<view class="bottom" v-else-if="msg==='1' && (state === '4')">
						<view class="">
							退回原因：
						</view>
						<view class="">
							{{back_reason}}
						</view>
					</view>
					<view class="foot">
						<view v-if="msg==='2' && state === '0'" class="btns">
							<button class="draft" @click="approval('0')">驳回</button>
							<button class="upload" @click="approval('1')">通过</button>
						</view>
						<view v-if="msg==='1' && (state === '5' || state === '2' || state === '4')" class="btns">
							<button class="add" @click="add">新增填报</button>
							<button class="upload" @click="submit">提交审核</button>
						</view>
						<!-- 复审退回 -->
						<view v-if="msg==='2' && state === '1'" class="btns">
							<button class="revocation" @click="approval('2')">复审退回</button>
						</view>
					</view>
					<xbd-popup :isShow="showDialog1" @dialogConfirm="dialogConfirm1" @dialogCancel="dialogCancel"
						content="确认删除？" cancelText="取消" confirmText="确定">
					</xbd-popup>
					<xbd-popup :isShow="showDialog" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel'>
						<template>
							<view class="draft_reason">
								<text v-if="dialog==='0'">驳回评价</text>
								<text v-else-if="dialog==='1'">通过评价</text>
								<text v-else-if="dialog==='2'">退回原因</text>
								<uni-easyinput v-if="dialog!=='2'" class="textarea" type="textarea"
									v-model="draftResone" placeholder="请输入评价内容：" :maxlength="30"></uni-easyinput>
								<uni-easyinput v-else class="textarea" type="textarea" v-model="draftResone"
									placeholder="请输入退回原因：" :maxlength="30"></uni-easyinput>
							</view>
						</template>
					</xbd-popup>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		Performance
	} from '@/api/index.js';
	export default {
		data() {
			return {
				id: '',
				title:'',
				delId:'',
				dialog: '0', // 0 驳回 ； 1 通过；2退回
				showDialog: false,
				showDialog1: false,
				flag: true,
				showList: [],
				msg: '',
				state: '',
				reason: '',
				back_reason: '',
				draftResone: '',
				option: { //传参控制页面审批提示
					title: "我的审批",
					pass: true,
					msg: ""
				}
			};
		},
		methods: {
			examine(val){
				if(this.msg ==='2' && this.state === '0'){
				uni.navigateTo({
					url: `./details?id=${val}&fa_id=${this.id}`,
				})
				}
				console.log('点击查看')
			},
			dialogConfirm1() {
				console.log('删除确认')
				this.del(this.delId)
				this.showDialog1 = false
			},
			dialogConfirm() {
				if (this.dialog === '0') {
					this.option.msg = "审批驳回"
					this.option.pass = false
					if(this.draftResone.length ===0){
						uni.showToast({
								title: '请填写评价内容',
								icon: 'none',
							})
					}else{
					this.rejected()
					this.showDialog = false
					}
					
				} else if (this.dialog === '1') {
					this.option.pass = true
					this.option.msg = "审批通过"
					if(this.draftResone.length ===0){
						uni.showToast({
								title: '请填写评价内容',
								icon: 'none',
							})
					}else{
					this.passed()
					this.showDialog = false
					}
					console.log('通过')
				} else {
					this.option.pass = true
					this.option.msg = "复审退回"
					if(this.draftResone.length ===0){
						uni.showToast({
								title: '请填写退回原因',
								icon: 'none',
							})
					}else{
					this.sendBack()
					this.showDialog = false
					}
					
					console.log('复审退回')
				}
				console.log('确认')
			},
			dialogCancel() {
				this.showDialog = false
				this.showDialog1 = false
			},
			// 修改
			modify(val) {
				console.log('修改')
				uni.navigateTo({
					url: `./backfill?id=${this.id}&detail_id=${val}`,
				})
			},
			// 删除
			clickDel(id) {
				console.log(id)
				this.delId = id
				this.showDialog1= true
				console.log('删除')
			},
			// 新增填报
			add() {
				uni.navigateTo({
							url:`./form?id=${this.id}`,
						})
				console.log('新增填报')
			},
			approval(val) {
				if(this.showList.length === 0){
					 uni.showToast({
							title: "无可审批数据!",
							icon: 'none',
						})
						return
				}
				this.draftResone=''
				if (val === '0') {
					console.log('驳回')
					this.dialog = '0'
				} else if (val === '1') {
					this.dialog = '1'
					console.log('通过')
				} else {
					this.dialog = '2'
					console.log('复审退回')
				}
				this.showDialog = true
			},
			async getList() {
				try {
					this.$showLoading('加载中');
					const res = await Performance.getDetail(this.id);
					uni.hideLoading();
					this.showList = res.data.data.details
					this.back_reason = res.data.data.back_reason
					this.reason = res.data.data.reason
					console.log(res, 'res')
					console.log(this.showList, 'this.showList')
				} catch (e) {
					uni.hideLoading();
					console.log(e);
				}
			},
			// 驳回操作请求
			async rejected() {
				const info = {
					id: this.id,
					reason: this.draftResone,
					state: 'refused'
				}
				console.log(info)
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await Performance.postAudit(info);
						uni.hideLoading();
						console.log(res, 'this.res')
						if (res.data.success) {
							if(res.data.code===9527){
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							}else{
								uni.redirectTo({
									url: `../status/status?option=${JSON.stringify(this.option)}`
								});
							}
						}else{
							this.flag = true
							uni.showToast({
									title: res.data.msg,
									icon: 'none',
								})
						}

					} catch (e) {
						this.flag = true
						uni.hideLoading();
						console.log(e);
					}
				}
			},
			// 通过请求
			async passed() {
				const info={
					id: this.id,
					reason: this.draftResone,
					state:"passed"
				}
				
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await Performance.postAudit(info);
						console.log(res)
						uni.hideLoading();
						if(res.data.success){
							// uni.$emit('performancePassed',this.id );
							if(res.data.code===9527){
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							}else{
								uni.redirectTo({
									url: `../status/status?option=${JSON.stringify(this.option)}`
								});
							}
						}else {
							this.flag = true
							uni.showToast({
									title: res.data.msg,
									icon: 'none',
								})
						}
						
					} catch (e) {
						this.flag = true
						uni.hideLoading();
						console.log(e);
					}
				}
			},
			// 复审退回请求
			async sendBack() {
				const info={
					id:this.id,
					back_reason:this.draftResone
				}
				if (this.flag) {
					try {
						this.flag = false
						this.$showLoading('加载中');
						const res = await Performance.getPerformanceBack(info);
						uni.hideLoading();
						if(res.data.success){
							// this.flag = true
							// uni.$emit('performanceId',  this.id );
							if(res.data.code===9527){
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
								})
								uni.navigateBack({
									delta: 1
								});
							}else{
								uni.redirectTo({
									url: `../status/status?option=${JSON.stringify(this.option)}`
								});
							}
						}else{
							this.flag = true
							uni.showToast({
									title: res.data.msg,
									icon: 'none',
								})
						}
						console.log(res)
						uni.hideLoading();
						
			
					} catch (e) {
						this.flag = true
						uni.hideLoading();
						console.log(e);
					}
				}
			},
			
			// 提交审核请求
			async submit(){
				if(this.flag)
					try{
						this.flag =false
						this.$showLoading('加载中');
						const res = await Performance.postSelfPerformance(this.id)
						uni.hideLoading();
						if(res.data.success){
								// uni.$emit('performanceHistory', this.id );
								uni.$emit('refresh');
								uni.showToast({
										title: '绩效提交成功！',
										icon: 'none',
									})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1000)
						}else{
							this.flag = true
							uni.showToast({
									title: res.data.msg,
									icon: 'none',
								})
						}
						
					}catch(e){
						this.flag = true
						console.log(e,'submitFill')
						//TODO handle the exception
					}
			},
			
			
			
			// 删除填报单
			async del(id){
				console.log(id)
				if(this.flag){
				try{
					this.flag =false
					this.$showLoading('加载中');
					const res = await Performance.postSaveDelete(id)
					uni.hideLoading();
					if(res.data.success){
						this.flag =true
						this.showList = this.showList.filter(item=>{
							return item.assess_detail_id !== id
						})
							// this.flag =true
							uni.$emit('refresh');
						if(this.showList.length === 0){
							uni.navigateBack({
								delta: 1
							});
						}
					}else {
						this.flag =true
						uni.showToast({
								title: res.data.msg,
								icon: 'none',
							})
					}
					
					console.log(res)
				}catch(e){
				}
				}
			},
		},
		computed: {
			showSwipe() {
				let flag = false
				if (this.msg === '1') {
					if (this.state === '5' || this.state === '2' || this.state === '4') {
						flag = true
					}
				} else {
					if(this.state !== '1'){
						flag = true
					}
				}
				console.log(flag)
				return flag
			}
		},
		onLoad(res) {
			console.log(res)
			this.state = res.state
			this.msg = res.msg
			this.id = res.id
			if(this.msg ==='1'){
				this.title = '填报表格'
			}else{
				this.title = '审批表格'
			}
			uni.setNavigationBarTitle({
			    title: this.title
			});
		},
		onShow(){
			this.getList()
		},
		onUnload(){
			// uni.$emit('modifyDetails',this.showList,this.id)
			console.log(this.showList,'showlist')
			
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list {
		background-color: #f8f8f8;
	}

	::v-deep .uni-easyinput__content-textarea {
		box-sizing: border-box;
		// border: 2rpx solid #EEEEEE;
		border-radius: 8rpx;
		text-align: left;
		font-size: 28rpx;
	}

	.content {
		padding-bottom: 150rpx;

		.card {
			width: 100%;
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 20rpx 30rpx 10rpx;
		}

		.box {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			margin-bottom: 10rpx;

			.left {
				margin-right: 30rpx;
				color: #999999;
			}

			.right {
				width: 500rpx;
				text-align: right;
				word-break: break-all;
			}
		}

		.bottom {
			padding: 0 30rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #101010;
		}

		.foot {
			margin-top: 120rpx;
			box-sizing: border-box;
			padding: 20rpx 80rpx;

			.btns {
				display: flex;
				justify-content: space-between;

				button {
					width: 260rpx;
					height: 30px;
					line-height: 30px;
					font-size: 28rpx;
					box-sizing: border-box;
				}

				.draft {
					margin-right: 50rpx;
					background-color: #FFFFFF;
					color: #FF7543;
					border-radius: 8rpx;
					box-sizing: border-box;
					border: 2rpx solid #FF7543;
				}

				.add {
					margin-right: 50rpx;
					border-radius: 8rpx;
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
				}

				.upload {
					border-radius: 8rpx;
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
				}

				.revocation {
					border-radius: 8rpx;
					background: url(../../static/images/common/bluebg.png) no-repeat;
					background-size: 100% 100%;
					color: $uni-text-color-inverse;
					margin-left: 180rpx;
				}
			}
		}

		.swipe_right {
			display: flex;
			align-items: center;
			box-sizing: border-box;

			.swipe_image {
				margin: 0 20rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}

		.textarea {
			box-sizing: border-box;
			margin: 10px 30rpx 10px 30rpx;
			width: 440rpx;
			text-align: left;
			font-size: 28rpx;
		}
	}
</style>
